<div class="detail-title" [style.background-color]="titleBackgroundColor">
  {{listTitle}}
</div>
<div class="detail-content">
  <nz-list nzGrid>
    <div nz-row [nzGutter]="16">
      <div nz-col *ngFor="let item of taskList" [nzSpan]="6">
        <nz-list-item>
          <nz-card [nzTitle]="item.name" [nzActions]="[actionCheck, actionEllipsis]">
            <div>
              <span>{{item.description}}</span>
            </div>
            <div style="text-align: center;">
              <nz-countdown [nzValue]="item.periodEndTime.getTime()" [nzFormat]="'D 天 H 时'"
                *ngIf="item.periodEndTime; else phaseShow"></nz-countdown>
              <ng-template #phaseShow>
                <nz-countdown [nzValue]="item.end!.getTime()" [nzFormat]="'D 天 H 时'"></nz-countdown>
              </ng-template>
            </div>
            <div>
              <span>工作目标：</span>
              <span>{{item.target}}</span>
            </div>
          </nz-card>
        </nz-list-item>
        <ng-template #actionCheck>

          <i nz-icon nzType="poweroff" nzTheme="outline" *ngIf="item.processStatus == 1; else taskUndone" nzTooltipTitle="工作已完成"
          nzTooltipPlacement="top" nz-tooltip></i>
          <ng-template #taskUndone>
            <i nz-icon nzType="check" nzTheme="outline" (click)="taskCheck(item)" nzTooltipTitle="完成工作"
              nzTooltipPlacement="top" nz-tooltip></i>
          </ng-template>

        </ng-template>
        <!-- <ng-template #tasksEndInDayAfterTomorrow_actionImportance>
          <i nz-icon nzType="fire" nzTheme="outline" (click)="taskImportant(item)" nzTooltipTitle="prompt text" nzTooltipPlacement="topLeft" nz-tooltip></i>
        </ng-template> -->
        <ng-template #actionEllipsis>
          <i nz-icon nzType="ellipsis" (click)="taskDetial(item)" nzTooltipTitle="详情" nzTooltipPlacement="top"
            nz-tooltip></i>
        </ng-template>
      </div>
    </div>
    <nz-list-empty *ngIf="taskList.length === 0"></nz-list-empty>
  </nz-list>
</div>
